<template>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>管理员管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 管理员列表 角色列表 权限列表 按钮 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="管理员列表" name="manager">
            <div>
                <el-button type="success">添加管理员</el-button>
            </div>
            <div>
                <el-input v-model="keyword" placeholder="请输入用户名" style="width: 150px;margin-right: 12px;"></el-input>
                <el-button type="info" @click="search">搜索</el-button>
            </div>
        </el-tab-pane>
        <el-tab-pane label="角色列表" name="role">
            <div>
                <el-button type="success">添加角色</el-button>
            </div>
        </el-tab-pane>
        <el-tab-pane label="权限列表" name="rule">
            <div>
                <el-button type="success">添加规则</el-button>
            </div>
        </el-tab-pane>
    </el-tabs>

    <!-- 管理员列表 -->
    <el-table v-if="activeName == 'manager'" :data="managerList" border style="width: 100% ; margin-top: 20px;"
        ref="multipleTable" tooltip-effect="dark" @selection-change="handleSelectionChange">
        <el-table-column label="用户头像" align="center">
            <template v-slot="scope">
                <!-- <img :src="scope.row" alt=""> -->
            </template>
        </el-table-column>
        <el-table-column label="用户名" prop="username" align="center">
        </el-table-column>
        <el-table-column label="所属管理员" prop="role.name" align="center">
        </el-table-column>
        <el-table-column label="状态" align="center">
            <template v-slot="scope">
                <el-button :class="scope.row.status == 1 ? 'button1' : 'button2'">
                    {{ scope.row.status == 1 ? '启用' : '禁用' }}
                </el-button>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
            <span style="color: #399;">修改</span>
            <span style="color: #399;">删除</span>
        </el-table-column>
    </el-table>

    <!-- 角色列表 -->
    <el-table v-if="activeName == 'role'" :data="managerList" border style="width: 100% ; margin-top: 20px;"
        ref="multipleTable" tooltip-effect="dark" @selection-change="handleSelectionChange">
        <el-table-column prop="name" label="角色名称" align="center">
        </el-table-column>
        <el-table-column label="角色描述" prop="desc" align="center">
        </el-table-column>
        <el-table-column label="状态" align="center">
            <template v-slot="scope">
                <el-button :class="scope.row.status == 1 ? 'button1' : 'button2'">
                    {{ scope.row.status == 1 ? '启用' : '禁用' }}
                </el-button>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
            <span style="color: #399;">修改</span>
            <span style="color: #399;">权限配置</span>
            <span style="color: #399;">删除</span>
        </el-table-column>
    </el-table>

    <!-- 权限列表 -->
    <el-tree v-if="activeName == 'rule'" :data="managerList" :props="defaultProps" @node-click="handleNodeClick">

    </el-tree>

    <!-- 分页器 -->
    <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
            :page-sizes="[1, 2, 5, 10]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
            :total="listnumber">
        </el-pagination>
    </div>
</template>
<script>
import { api_manager } from '@/common/api/index'
export default {
    data() {
        return {
            activeName: 'manager',
            tab: 'manager',
            page: 1,
            limit: 10,
            listnumber: 10,
            keyword: '',
            managerList: [],
            roleList: [],
            ruleList: [],
            defaultProps: {
                children: 'child',
                label: 'name'
            }
        }
    },
    methods: {
        handleClick(tab) {
            this.tab = tab.props.name
            console.log(this.tab);
            this.getmanager()
        },
        async getmanager() {
            let res = await api_manager(this.tab, this.page, this.limit, this.keyword)
            console.log(res.data.data.list);
            if (res.data.msg == 'ok') {
                this.listnumber = res.data.data.totalCount
                this.managerList = res.data.data.list
            }
        },

        // 更改展示条数
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.limit = val
            this.getmanager()
        },
        // 切换展示页数
        handleCurrentChange(val) {
            this.page = val
            // console.log(`当前页: ${val}`);
            this.getmanager()
        },
        // 树形控件
        handleNodeClick(data) {
            console.log(data);
        }
    },
    mounted() {
        this.getmanager()
    },
}
</script>

<style scoped>
.el-breadcrumb {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 20px;
}

.el-tab-pane {
    display: flex;
    justify-content: space-between;
}

.button1 {
    color: #67c23a;
    background: #f0f9eb;
    border-color: #c2e7b0;
}

.button2 {
    color: #f56c6c;
    background: #fef0f0;
    border-color: #fbc4c4;
}
</style>